<template>
	<view>
		<view class="xianjin_lucky" style="background-image: url('http://lottery.yywlcm.com/upload/h5/home/1.png')">
			<p class="fw f28">天天送现金</p>
			<p class="f24 c_868686">每天12点上新，抽现金红包</p>

			<button open-type="share">分享</button>
		</view>
		<!-- 商品 -->
		<view class="flex boxdraw">
			<view class="drawone mr20">
				<view class="f24 c_fff textcenter fw">明天开奖</view>
				<view class="good_box">
					<image src="http://lottery.yywlcm.com/upload/h5/home/8.png" alt="" />
				</view>
				<image src="http://lottery.yywlcm.com/upload/h5/home/3.png" alt="" class="cj_img textcenter" />
			</view>
			<view v-for="(item,index) in 2 " :key="item" class="drawother flexcolumn aligncenter justifycenter bgc_fff"
				:class="{' mr20 ': index<1}">
				<view class="f24 c_000 textcenter fw mb10">后天开奖</view>
				<view class="goodinner mb10">
					<image src="http://lottery.yywlcm.com/upload/h5/home/8.png" mode=""></image>
				</view>
				<view class="f26 c_000 mb10">¥2333</view>
				<view class="tx_button f26 c_fff flexcenter">
					<image src="http://lottery.yywlcm.com/upload/h5/home/5.png" mode="" class="mr10"></image> 提醒我
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {}
</script>
<style lang="scss" scoped>
	.xianjin_lucky {
		position: relative;
		background-size: 100% 100%;
		padding: 30rpx;
		margin-bottom: 15rpx;

		p {
			line-height: 50rpx;
		}

		button {
			padding: 0;
			width: 100rpx;
			line-height: 48rpx;
			font-size: 26rpx;
			border-radius: 50rpx;
			background: linear-gradient(180deg, #148DFF 0%, #6CC3FF 100%);
			color: #fff;
			position: absolute;
			right: 3%;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.boxdraw {
		padding: 15rpx 20rpx;
		align-items: flex-end;
	}

	.drawone {
		width: 224rpx;
		height: 300rpx;
		background: url('http://lottery.yywlcm.com/upload/h5/home/4.png') center center no-repeat;
		background-size: cover;
		padding: 10rpx;

		.cj_img {
			width: 68rpx;
			height: 68rpx;
			margin: auto;
			display: block;
		}

		.good_box {
			height: 150rpx;
			margin: 20rpx 0;

			image {
				max-width: 100%;
				height: 100%;
			}
		}
	}

	.drawother {
		width: 250rpx;
		height: 280rpx;
		border-radius: 20rpx;
		padding: 10rpx;
	}

	.tx_button {
		width: 170rpx;
		height: 50rpx;
		background: linear-gradient(180deg, #148BFF 0%, #6EC6FF 100%);
		border-radius: 30rpx;

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.goodinner {
		height: 120rpx;
		width: 120rpx;
		background: url('http://lottery.yywlcm.com/upload/h5/home/11.png') center center no-repeat;
		background-size: cover;

		image {
			max-width: 100%;
			height: 100%;
		}
	}
</style>